import React from 'react'
import type { ComplianceItem } from '@/types/work'
import { ComplianceType } from '@/types/work'
import ComplianceCard from './ComplianceCard'

interface ComplianceListProps {
  items: ComplianceItem[]
  updateItem: (item: ComplianceItem) => void
  deleteItem: (id: string) => void
}

const ComplianceList: React.FC<ComplianceListProps> = ({ 
  items, 
  updateItem, 
  deleteItem
}) => {
  // 按类型分组
  const riskItems = items.filter(item => item.compliance_type === ComplianceType.RISK)
  const guaranteeItems = items.filter(item => item.compliance_type === ComplianceType.GUARANTEE)

  // 如果没有检查项，显示空状态
  if (items.length === 0) {
    return (
      <div className="bg-card rounded-lg shadow-sm p-8 text-center">
        <p className="text-muted-foreground text-lg">
          没有符合筛选条件的检查项
        </p>
      </div>
    )
  }

  return (
    <div className="space-y-8">
      {/* 风险项部分 */}
      {riskItems.length > 0 && (
        <div>
          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center">
            <span className="inline-block w-3 h-3 bg-destructive rounded-full mr-2"></span>
            风险项 ({riskItems.length})
          </h2>
          <div className="grid grid-cols-1 gap-4">
            {riskItems.map(item => (
              <ComplianceCard 
                key={item.id}
                item={item}
                updateItem={updateItem}
                deleteItem={deleteItem}
              />
            ))}
          </div>
        </div>
      )}

      {/* 保障项部分 */}
      {guaranteeItems.length > 0 && (
        <div>
          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center">
            <span className="inline-block w-3 h-3 bg-primary rounded-full mr-2"></span>
            保障项 ({guaranteeItems.length})
          </h2>
          <div className="grid grid-cols-1 gap-4">
            {guaranteeItems.map(item => (
              <ComplianceCard 
                key={item.id}
                item={item}
                updateItem={updateItem}
                deleteItem={deleteItem}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default ComplianceList
